<template>
  <div id="LOGIN_WRAP">
    <div id="CARD_GROUP">
      <div id="LOGIN_PIC"></div>
      <div id="LOGIN_MAIN">
        <h2>登录</h2>

        <el-form :model="loginForm" ref="loginForm">
          <el-form-item prop="id_card">
            <el-input
              icon="el-icon-user"
              type="text"
              placeholder="请输入学号"
              v-model="loginForm.id_card"
            />
          </el-form-item>

          <el-form-item prop="pwd">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="loginForm.pwd"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" id="LoginBtn" @click="login()">
          立即登录
        </el-button>

        <div>
          <el-link
            type="primary"
            @click="$router.push('register')"
          >
            注册
          </el-link>
          &nbsp;
          <el-link type="primary" class="word4" @click="$router.push('reset')">
            忘记密码?
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        id_card: "",
        pwd: "",
        sf: "1",
      },
      address: "",
      rememberLogin: false,
    };
  },

  methods: {
    login() {
      let that = this;
      that.axios
        .post("/log/login.php", {
          id: that.loginForm.id_card,
          pwd: that.loginForm.pwd,
        })
        .then((res) => {
          console.log(res);
          if (res.data.loginState === "success") {
            that.$message({
              showClose: true,
              type: "success",
              message: "登录成功",
            });
            let user = {
              id: res.data.user_info.stu_id,
              name: res.data.user_info.name,
              identity: res.data.user_info.identity,
              token: res.data.user_info.token,
            };
            that.$store.commit("login", user);
            console.log(that.$store);
            that.$router.push("/main");
          } else {
            that.$message({
              showClose: true,
              type: "error",
              message: "登录失败",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    msg(message, type = "info") {
      this.$message({
        message,
        type,
      });
    },
  },

  mounted() {},
};
</script>

<style scoped>

#LOGIN_WRAP {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#LOGIN_MAIN {
  width: 250px;
  height: 100%;
  box-sizing: border-box;
  padding: 45px 10px;
  background-color: white;
}
#LOGIN_PIC {
  background:url("config/bg.png");
  background-size: 100% 100%;
  width:450px;
  height: 100%;
}
#CARD_GROUP{
  height: 400px;
  display: flex;
  /* padding: 10px; */
  justify-content: center;
  align-items: center;
  background-color: rgb(247, 247, 247);
  border:1px solid #eee;
  border-radius: 15px;
  box-shadow: 0 0 3px #eee;
}
#LoginBtn {
  width: 100%;
}
</style>


